<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.title}"></title>
    <script th:inline="javascript">
        $(function () {
            $("#login-submit-btn").click(function (event) {
                event.stopPropagation();
                var flag = $("#login-form-id input.form-control").verification({});
                if(!flag){
                    return;
                }

                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/anon/authVfcCode}]]*/'',
                    data: [{name:"vfcCode",value:$("#login-vfc-code-id").val()}],
                    success: function (data) {
                        if(data.success){
                            $("#login-form-id").submit();
                        }else{
                            message(data.msg);
                        }
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
                // console.info(obj);
                //$("#login-form-id").submit()
                // message("登录成功")


            });
            var i = 0;
            $("#vfc-code-id").click(function (event) {
                event.stopPropagation();
                i++;
                $("#vfc-code-id").attr("src" ,path +"/anon/getLoginVfcCode/vfcCode" + i +".pgn");

            });

            $("ul#tab-ul-login-id>li").click(function (event) {
                event.stopPropagation()
                $(this).parent().find("a").removeClass("active");
                $(this).find("a").addClass("active");
                $("#tab-content-id > article").removeClass("in");
                $("#tab-content-id > article").removeClass("active");
                var tabId = $(this).attr("tab");
                $("#" + tabId).addClass("in");
                $("#" + tabId).addClass("active");


            });
            $("ul#tab-ul-login-id>li:nth-child(1)").click();

            $("#get-mail-code-id").click(function (event) {
                event.stopPropagation();
                var userEmailId = $("#user-email-id").val();
                var reg = $("#user-email-id").attr("reg");
                var regexp = new RegExp(reg);
                if (!regexp.test(userEmailId)) {
                    $("#user-email-id").addClass("ui-state-error");
                    $("#user-email-id").focus();
                    return;
                }

                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/anon/getMailVfcCode}]]*/'',
                    data: [{name:"email",value:userEmailId}],
                    success: function (data) {
                        message(data.msg);
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            });

            $("#email-submit-btn").click(function (event) {
                event.stopPropagation();
                var flag = $("#email-form-id input.form-control").verification({});
                if(!flag){
                    return;
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/anon/getPasswordByEmailCode}]]*/'',
                    data: [{name:"email",value:$("#user-email-id").val()}],
                    success: function (data) {
                        message(data);
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });

            })

        });//ready
    </script>
    <style>
        .vfc-code{
            padding: 6px 12px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 232px;
        }
    </style>
</head>
<body style="display: flex;flex-direction: column">
<div style="flex-basis: 100px;display: flex;flex-direction: row">
    <div style="flex-grow: 1;">
        <img th:if="${session.siteLanguage} eq 'en'" th:src="@{/assets/images/logo_en.png}">
        <img th:if="${session.siteLanguage} ne 'en'" th:src="@{/assets/images/logo_zh.png}">

    </div>
    <div style="flex-basis: 100px;    margin-top: 33px;">
        <a th:href="@{login(siteLanguage=zh)}" th:text="#{login.chinese}"></a>
        <a th:href="@{login(siteLanguage=en)}" th:text="#{login.english}"></a>
    </div>
</div>
<div style="flex-grow: 1;display: flex;flex-direction: row">
    <img style="flex-grow: 1;" th:src="@{/assets/images/pic.png}">
    <div style="flex-basis: 320px;display: flex;flex-direction: column;margin-right: 20px;">
        <div style="flex-grow: 1;"></div>
        <div  style="flex-basis: 300px">
            <form id="email-form-id" th:action="@{verification}" method="post">
                <div class="form-group">
                    <span th:text="#{login.user.email}"></span>
                    <input id="user-email-id" class="form-control"  name="username" reg="^.{1,20}$" type="email">
                    <input  type="hidden" name="password" value="email">
                </div>
                <div style="margin-bottom: 15px;">
                    <div th:text="#{login.auth.code}"></div>
                    <input id="email-vfc-code-id" type="text" name="vfcCode" class="vfc-code">
                    <a id="get-mail-code-id" href="#" class="btn-success" th:text="#{get.email.code}"></a>
                </div>
                <div class="form-group">
                    <!--                        <button type="submit" th:text="#{login.user.btn}"></button>-->
                    <a id="email-submit-btn" class="form-control btn-success" href="#" th:text="#{login.user.btn}" style="text-align: center"></a>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>








